import {
  Button,
  message,
  Modal,
  RadioButton,
  RadioGroup,
  Space
} from 'ant-design-vue'
import moment from 'moment'
import { defineComponent, nextTick, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { omit } from 'xe-utils'

import { marketingApi } from '@/apis'
import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { TABLE_FORMAT, TABLE_ITEM_RENDER, TABLE_RENDERER } from '@/constants'
import { useDialog } from '@/hooks'
import { bus, optionsToMap } from '@/utils'
import { handlePrice, handlePricePoint } from '@/utils/bsshow'
import { couponTypeOptions, refundStatusOptions } from '@/views/order/constants'

export default defineComponent({
  name: 'YxRefundOrderList',
  setup() {
    const tableRef = ref({} as ProTableRef)
    const refundOrderStatus = [
      { label: '退款成功', value: 'SUCCESS' },
      { label: '退款异常', value: 'CHANGE' },
      { label: '退款关闭', value: 'REFUNDCLOSE' }
    ]
    const tableConfig = ref({
      fixedHeight: true,
      options: {
        border: true,
        align: 'center',
        formConfig: {
          items: [
            {
              title: '订单号',
              field: 'orderSn',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '售后单号',
              field: 'refundNo',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '下单人',
              field: 'nickname',
              itemRender: {
                name: TABLE_ITEM_RENDER.AInput,
                props: {
                  placeholder: '请输入',
                  allowClear: true
                }
              }
            },
            {
              title: '退款时间',
              itemRender: {
                name: TABLE_RENDERER.FormItemDate,
                props: {
                  type: 'range',
                  placeholder: ['开始时间', '结束时间'],
                  valueFormat: 'x',
                  showTime: {
                    defaultValue: [
                      moment('00:00:00', 'HH:mm:ss'),
                      moment('23:59:59', 'HH:mm:ss')
                    ]
                  },
                  keys: ['refundStart', 'refundEnd']
                }
              }
            },
            {
              itemRender: {
                name: TABLE_RENDERER.FormItemBtns
              }
            }
          ]
        },
        columnConfig: {
          minWidth: 100
        },
        columns: [
          {
            title: '订单号',
            field: 'orderSn',
            minWidth: 230
          },
          {
            title: '售后单号',
            field: 'refundNo',
            minWidth: 230
          },
          {
            title: '微信退款流水号',
            field: 'refundId',
            minWidth: 230
          },
          {
            title: '订单状态',
            field: 'status',
            formatter: ({ cellValue }) => {
              return optionsToMap(refundOrderStatus)[cellValue]
            }
          },
          {
            title: '数量',
            field: 'amount'
          },
          {
            title: '退款金额',
            slots: {
              default: 'salePrice'
            }
          },
          {
            title: '退款发起时间',
            field: 'refundTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss'],
            minWidth: 150
          },
          {
            title: '退款到账时间',
            field: 'deriveTime',
            formatter: [TABLE_FORMAT.Date, 'yyyy-MM-dd HH:mm:ss'],
            minWidth: 150
          }
        ],
        pagerConfig: {
          pageSize: 15
        },
        proxyConfig: {
          seq: true,
          form: true,
          props: {
            result: 'dataList',
            total: 'page.totalCount'
          },
          ajax: {
            query: async ({ page, form }) => {
              const data = await marketingApi.getRefundList({
                pageParameter: {
                  pageSize: page.pageSize,
                  currentPage: page.currentPage
                },
                ...form
              })
              return data
            }
          }
        }
      }
    } as ProTableProps)

    return {
      tableRef,
      tableConfig
    }
  },
  render() {
    return (
      <div>
        <ProTable
          ref="tableRef"
          v-slots={{
            salePrice: ({ row }) => {
              return <Space>{handlePricePoint(row.price, row.point)}</Space>
            }
          }}
          {...this.tableConfig}
        />
      </div>
    )
  }
})
